//渠道管理 - 渠道数据 - 渠道转化数据

import React, { Component } from 'react';
import { Form , Row, Col, Table, DatePicker, Select } from 'antd';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

const columns = [ 
  {
		title: '渠道名称',
		align: 'center',
		dataIndex: 'canalName',
		width: 80
  }, 
  {
		title: '统计时间',
		align: 'center',
		dataIndex: 'statisticsTime',
    width: 80
  },
  {
    title: '注册量',
    align: 'center',
    dataIndex: 'registeredNumber',
    width: 80
  },
  {
    title: '渠道注册数量',
    align: 'center',
    dataIndex: 'canalRegisteredNumber',
    width: 70
  },
  {
    title: '申请量',
    align: 'center',
    dataIndex: 'applyNumber',
    width: 70
  },
  {
    title: '放款量',
    align: 'center',
    dataIndex: 'loanNumber',
    width: 80
  },
  {
    title: '进件率',
    align: 'center',
    dataIndex: 'incomingRate',
    width: 80
  },
  {
    title: '注册转化率',
    align: 'center',
    dataIndex: 'registeredTransformRate',
    width: 80
  },
  {
    title: '放款转化率',
    align: 'center',
    dataIndex: 'loanTransformRate',
    width: 80
  },
];

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
		key: i,
    canalName: 'baisha',
    statisticsTime: '2018-12-14',
    registeredNumber: 100,
    canalRegisteredNumber: 100,
    applyNumber: 80,
    loanNumber: 30,
    incomingRate: '50%',
    registeredTransformRate: '10%',
    loanTransformRate: '17%'
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}

class ChannelTransform extends Component {

	state = {
    selectedRowKeys: []
  };

  onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  }

	handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const rangeValue = fieldsValue['range-picker'];
      const values = {
        ...fieldsValue,
        'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
      };
      console.log('Received values of form: ', values);
    });
	}
	
	handleSearch = () => {
		console.log(1);
  }
  
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
		const { getFieldDecorator } = this.props.form;
		const rangeConfig = {
			rules: [{ type: 'array', required: true, message: 'Please select time!' }],
		};
		return (
      <div>
        <div className="line"></div>
        <div className="per-info">
          <Form layout="inline" onSubmit={this.handleSubmit}>
            <Row>
              <Col span={6}>
                <FormItem>
                  {getFieldDecorator('statisticCanal', {
                    rules: [{ required: true, message: 'Please input your statisticCanal!' }],
                  })(
                    <Select placeholder="统计渠道" style={{ color: 'rgba(0,0,0,.25)', width: '400px' }}>
                    <Select.Option value="canal01">渠道01</Select.Option>
                    <Select.Option value="canal02">渠道02</Select.Option>
                    <Select.Option value="canal03">渠道03</Select.Option>
                  </Select>
                  )} 
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem>
                  {getFieldDecorator('range-picker', rangeConfig)(
                    <RangePicker format="YYYY/MM/DD" style={{ color: 'rgba(0,0,0,.25)', width: '400px' }} />
                  )}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
        <div className="info-table">
          <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered columns={columns} dataSource={data} />
        </div>
      </div>   
		);
	}
}
    
const TransformForm = Form.create()(ChannelTransform);
    
export default TransformForm;